import React, { Component } from 'react'
import { HomeDefaultApi } from "../../request/api"
import Loading from "@/components/Loading/Loading"
import xiaolang from '@/assets/images/home/xiaolang.png'
import books from '@/assets/images/home/books.png'
import examination from '@/assets/images/home/examination.png'
import practice from '@/assets/images/home/practice.png'
import List from '@/components/Home/List.jsx'
import "./Home.less"
export default class Home extends Component {
    state = {
        // Loading的开关变量
        showLoading: true,
        exam:{},
        // 学科题库列表
        exemItems:[],
        // 收藏题目
        collect:'',
        // 错题集
        wrong:'',
        // 已学
        study:''
    }
    render() {
        return (
            <div>
                   <div className="home">
        <div className="title">
          <div className="subject">{this.state.exam.title}</div>
          <div className="testSubject">切换考试科目
          </div>
        </div>
        <div className="studyKu">
          <p className="welcome">欢迎使用IT猿题库！</p>
          <div className="down">
            <img src={xiaolang} alt="" />
            <div className="right">
              <div className="top">
                <span>已学{this.state.study}题</span>
                <span>|</span> 
                <span>共{this.state.exam.itemCount}题</span>
              </div>
              <div className="down">
                <div className="err">
                  <div>{this.state.wrong}</div>
                  <div>错题</div>
                </div>
                <div className="shoucang">
                  <div>{this.state.collect}</div>
                  <div>收藏</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="category">
          <img src={examination} alt="" />
          <img src={books} alt="" />
          <img src={practice} alt="" />
        </div>
        <div className="tiku">
          <h3 className="subject_title">学科题库</h3>
          <span>坚持每一天，成长看得见</span>
        </div>
         { <List listArr={this.state.exemItems} />}
        <Loading showLoading={this.state.showLoading} />
      </div>
            </div>
        )
    }
    async componentDidMount() {

        let token = localStorage.getItem("x-auth-token")
        if (token) {
            let res = await HomeDefaultApi()
            // 默认是true 当请求成功的时候改为false
            this.setState({
                showLoading: false
            })
            if (res.response && res.response.data.errCode === 1002) {
                this.setState({
                    showLoading: true
                })
                this.props.history.push("/login")
                return
            }

            // 做数据渲染
            let {exam,exemItems,collect,wrong,study} = res.data;
            this.setState({
                exam:exam,
                exemItems:exemItems,
                collect:collect,
                wrong:wrong,
                study:study
            })


            console.log(res);
        } else {
            // 用户没有登录的时候,让用户进行跳转到登录界面,Loading设置为500毫秒,然后进行跳转到login界面
            this.setState({
                showLoading: true
            })
            setTimeout(() => {
                this.setState({
                    showLoading: false
                })
                this.props.history.push("/login")
            }, 500);

        }

    }
}
